<template>
  <a-card :bordered="false" class="br-10">
    <!-- 协办方或活动取消或活动结束不允许邀请 -->
    <a-button v-if="!disabled && !isEnd" type="primary" class="_mb-10" @click="openSelectOrganization"
      >邀请协办组织</a-button
    >
    <a-button v-if="!disabled" type="primary" class="_ml-10 _mb-10" ghost icon="setting" @click="openContactConfig"
      >合作联系人</a-button
    >
    <div class="table-page-search">
      <a-form>
        <a-form-item label="关键词:">
          <a-input v-model="queryParam.keyWord" placeholder="输入组织名称/联系人/手机号" allowClear />
        </a-form-item>

        <span class="search-submitButtons">
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>

    <a-radio-group v-model="queryParam.partnerReviewStatus" :style="{ marginTop: '8px' }" @change="handleSearch">
      <a-radio-button v-for="(item, index) in statusOptions" :key="index" :value="item.value">
        {{ item.label }}
      </a-radio-button>
    </a-radio-group>
    <s-table size="default" ref="table" :rowSelection="null" :columns="columns" :data="loadData">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!--  协办方联系人 -->
      <span slot="contactName" slot-scope="text, record">
        <div>{{ record.contactName }}</div>
        <div>{{ record.contactPhone }}</div>
      </span>

      <!--  合作状态 -->
      <span slot="reviewStatus" slot-scope="text">
        <a-tag v-if="text === 1" color="blue">已合作</a-tag>
        <a-tag v-else-if="text === 4">已失效</a-tag>
        <a-tag v-else color="orange">申请中</a-tag>
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button size="small" class="width-8" @click="handleConfig(record)">
          合作配置
        </a-button>
      </span>
    </s-table>

    <SelectOrganization ref="SelectOrganization" @refresh="handleSearch" />
    <ContactConfig ref="ContactConfig" @refresh="getActivityDetails" />
    <CooperationConfig ref="cooperationConfigRef" @ok="handleCooperationConfig" />
  </a-card>
</template>

<script>
import {
  activityPartnerList,
  getUnionActivityInfo,
  editSection,
  apConfig,
  validExistPayTicket
} from '@/api/activity/activity'
import CooperationConfig from '../components/CooperationConfig'
import { STable } from '@/components'
import SelectOrganization from '../components/selectOrganization'
import { activityStatusEnum, activityTypeEnum, publishStatusEnum } from '@/enums/activity'
import ContactConfig from '../components/contactConfig/index.vue'

export default {
  components: {
    STable,
    SelectOrganization,
    ContactConfig,
    CooperationConfig
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10
      },
      // 查询参数
      queryParam: {
        activityId: undefined,
        keyWord: undefined,
        partnerReviewStatus: ''
      },
      // 活动表单
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: 100
        },
        {
          title: '协办组织',
          dataIndex: 'orgName',
          width: 200,
          ellipsis: true
        },
        {
          title: '协办方联系人',
          dataIndex: 'contactName',
          width: 120,
          scopedSlots: { customRender: 'contactName' }
        },
        {
          title: '合作状态',
          dataIndex: 'reviewStatus',
          width: 100,
          scopedSlots: { customRender: 'reviewStatus' }
        },
        {
          title: '浏览量',
          dataIndex: 'browseNum',
          width: 100
        },
        {
          title: '浏览人数',
          dataIndex: 'browsePeopleNum',
          width: 100
        },
        {
          title: '报名人数',
          dataIndex: 'registerNum',
          width: 100
        },
        {
          title: '报名成功',
          dataIndex: 'passedNum',
          width: 100
        },
        {
          title: '待审核',
          dataIndex: 'waitingReviewNum',
          width: 100
        },
        {
          title: '已签到',
          dataIndex: 'registerSignNum',
          width: 100
        },
        {
          title: '合作时间',
          dataIndex: 'reviewTime',
          width: 180
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          fixed: 'right',
          width: 100
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return activityPartnerList(Object.assign(parameter, this.queryParam))
      },

      // 审核状态(0:待审核;1:审核通过(已合作);2:审核不通过;3:搁置;4:已失效
      statusOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已合作',
          value: 1
        },
        {
          label: '申请中',
          value: 0
        },
        {
          label: '已失效',
          value: 4
        }
      ],
      activityInfo: {} // 活动信息
    }
  },
  computed: {
    disabled() {
      return this.activityInfo.activityType === activityTypeEnum.other_join // 协办方
    },
    // 活动是否已结束或者已取消
    isEnd() {
      return (
        this.activityInfo.activityStatus === activityStatusEnum.END ||
        this.activityInfo.activityStatus === activityStatusEnum.CANCEL
      )
    }
  },
  created() {
    this.getActivityDetails()
  },
  methods: {
    handleConfig(record) {
      this.$refs.cooperationConfigRef.moduleShow(record)
    },
    async handleCooperationConfig(data) {
      await apConfig(data)
      this.$message.success('配置成功')
      this.$refs.table.refresh(true)
    },
    getActivityDetails() {
      const { activityId } = this.$route.query
      this.queryParam.activityId = activityId
      getUnionActivityInfo(activityId).then(res => {
        this.activityInfo = res.data
        this.bandTips()
      })
    },
    async openSelectOrganization() {
      const that = this
      const res = await validExistPayTicket(this.$route.query.activityId)
      if (res.code !== 0) return

      if (res.data) {
        this.$info({
          title: '邀请协办组织提示',
          content: '当前活动内创建过付费类型，不支持邀请协办组织。如需跨组织合作，请创建新的活动，不要创建付费类型。',
          icon: 'exclamation-circle',
          onOk() {}
        })
        return
      }

      if (that.activityInfo.publishStatus !== publishStatusEnum.ISSUE) {
        // 活动未发布,拦截
        that.$confirm({
          icon: 'info-circle',
          title: `暂不可邀请`,
          content: `活动需要正常发布中才可邀请协办组织，当前活动暂未发布/未上架，是否要立即发布上架？`,
          okText: `发布活动`,
          cancelText: '暂不发布',
          onOk() {
            editSection({ id: that.queryParam.activityId, publishStatus: publishStatusEnum.ISSUE }).then(() => {
              that.$message.success('发布成功')
              that.activityInfo.publishStatus = publishStatusEnum.ISSUE
            })
          }
        })
        return
      }
      that.$refs.SelectOrganization.openModal(that.queryParam.activityId)
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    handleReset() {
      this.queryParam.keyWord = undefined
      this.queryParam.partnerReviewStatus = ''
      this.$refs.table.refresh(true)
    },
    bandTips() {
      const that = this
      if (!that.activityInfo.activityContactJoinUnion || !that.activityInfo.activityContactJoinUnion.sysUserId) {
        that.$confirm({
          title: '合作提示?',
          content:
            '您当前还未设置跨会合作联系人，建议补充添加，添加后将会展示给协办组织，方便协办组织活动负责人联系本方。',
          okText: '前往设置',
          cancelText: '暂不添加',
          centered: true,
          onOk() {
            that.openContactConfig()
          }
        })
      }
    },
    openContactConfig() {
      this.$refs.ContactConfig.openModal(this.activityInfo)
    }
  }
}
</script>

<style lang="less" scoped></style>
